<script setup>
import Cart from './components/Cart.vue';
import { computed, ref } from 'vue';
import emitter from '../../utils/bus';
          const title= "技术社区";
          const activeIndex= 0;
          const activeName= 1;
          const keywords= "";
            const user= {
              name: "张三",
              username: "admin",
              age: 18,
              gender: "男",
              hobby: "",
              job: "前端开发工程师",
              bio: "<h4>程序员的一天</h4><ul><li>需求分析</li><li>编程开发</li><li>测试部署</li></ul>",
            };
            // totalPrice: 0,
            // 商品列表
            const productList = [
              {
                type: "徽章",
                name: "IT社区文创 ：「代码新秀闪耀」 荣誉徽章",
                price: 10,
                stock: 200,
                img: "/images/product01.png",
              },
              {
                type: "帆布包",
                name: "【it社区文创】「极简主义」帆布包",
                price: 50,
                stock: 100,
                img: "/images/product02.png",
              },
              {
                type: "T恤",
                name: "蓝字魔法，解锁IT新风尚——百搭T恤衫",
                price: 60,
                stock: 100,
                img: "/images/product03.png",
              },
              {
                type: "笔记本",
                name: "高端皮质IT笔记本，简约设计尽显专业气质",
                price: 30,
                stock: 50,
                img: "/images/product04.png",
              },
            ];
          const addToCart = (item) => {
            emitter.emit('addToCart',item)
          };
</script>

<template>

        <el-container class="main">
          <!-- 商品列表 -->
          <el-main>
            <el-row :gutter="8">
              <el-col :span="8" v-for="(item,i) in productList" :key="i" style="padding-bottom: 8px">
                <el-card>
                  <img :src="item.img" style="width: 100%" />
                  <p>{{item.name}}</p>
                  <el-row>
                    <el-col :span="12">价格：{{item.price}}</el-col>
                    <el-col :span="12">库存：{{item.stock}}</el-col>
                  </el-row>
                  <el-button @click="addToCart(item)">加入购物车</el-button>
                </el-card>
              </el-col>
            </el-row>
          </el-main>
          <el-aside>
            <cart></cart>
          </el-aside>
        </el-container>
</template>

<style></style>